<layout name='layout_page' />

<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>Dashboard</span></li>
				</ol>
				<h1>Dashboard</h1>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-6 col-sm-6 col-xs-12">
				<a href="<{:U('Mentees/index')}>">
				<div class="main-box infographic-box"> <i class="fa fa-user red-bg"></i> <span class="headline">My Mentees</span> <span class="value"> <span class="timer" data-from="0" data-to="<{$userInfo.mentees}>" data-speed="500" data-refresh-interval="50"> <{$userInfo.mentees}> </span> </span> </div>
				</a>
			</div>
			<div class="col-lg-6 col-sm-6 col-xs-12">
				<a href="<{:U('Plan/index')}>">
				<div class="main-box infographic-box"> <i class="fa fa-book emerald-bg"></i> <span class="headline">Training Plans</span> <span class="value"> <span class="timer" data-from="0" data-to="<{$userInfo.project}>" data-speed="500" data-refresh-interval="30"> <{$userInfo.project}> </span> </span> </div>
				</a>
			</div>
		</div>


		<div class="row">
			<div class="col-lg-12">
				<div class="main-box clearfix">
					<header class="main-box-header clearfix">
						<h2 class="pull-left">Announcements</h2>
						<div class="filter-block pull-right">
							<div class="form-group pull-left"></div>
							<a href="<{:U('Notice/index')}>" class="btn btn-primary pull-right"> <i class="fa fa-eye fa-lg"></i> View all </a> </div>
					</header>
					<div class="main-box-body clearfix">
						<div class="table-responsive clearfix">
							<table class="table table-hover">
								<thead>
									<tr>
										<th><span>Date</span></th>
										<th>Title</th>
										<th class="text-right">View</th>
									</tr>
								</thead>
								<tbody>
									<volist name="sysmsg" id="vo">
									<tr>
										<td><{$vo.createTime|date="F,d,Y",###}></td>
										<td><a href="javascript:void(0)" onclick="showModel('<{:U('Notice/view',array('id'=>$vo['id']))}>')"><{$vo.title}></a></td>
										<td class="text-right" style="width: 15%;"><a href="javascript:void(0)" onclick="showModel('<{:U('Notice/view',array('id'=>$vo['id']))}>')" class="table-link"> <span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a></td>
									</tr>
									</volist>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
		function showModel(remote){
		  $('#myModal').modal({
		    remote : remote
		  });

		  $("#myModal").on("hidden.bs.modal", function() {
		    $(this).removeData("bs.modal");
		  })
		}
		</script>     
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		      <div class="modal-content"></div>
		  </div>
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="main-box clearfix">
					<header class="main-box-header clearfix">
						<h2>Calendar</h2>
					</header>
					<div class="main-box-body clearfix">
					<div id="calendar"></div>
						<!-- <div class="conversation-wrapper">
							<div class="conversation-content">
								<div class="conversation-inner">
									<volist name="chat" id="vo">
									<div class="conversation-item item-left clearfix">
										<div class="conversation-user"> <img style="width: 50px; height: 50px;" src="<{$vo.fromFace|getface}>" /> </div>
										<div class="conversation-body">
											<div class="name"> <{$vo.fromName}></div>
											<div class="time hidden-xs"> <{$vo.createTime|date="F,d,Y H:i:s",###}></div>
											<div class="text"><{$vo.content}></div>
										</div>
									</div>
									</volist>
								</div>
							</div>
						</div> -->
					</div>
				</div>
			</div>
			<!-- <div class="col-lg-6">
				<div class="main-box clearfix">
					<div class="tabs-wrapper tabs-no-header">
						<ul class="nav nav-tabs">
							<li class="active"><a href="#tab-todo" data-toggle="tab">Todo</a></li>
						</ul>
						<div class="tab-content tab-content-body clearfix">	
							<div class="tab-pane fade in active" id="tab-todo">	
								<ul class="widget-todo">
									<volist name="todo" id="vo">
									<li class="clearfix">
										<div class="name">
											<label><{$vo.title}></label>		
										</div>
										<div class="actions"> <a href="<{$vo.link}>" class="table-link"><span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i> </span> </a></div>
									</li>
									</volist>								
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div> -->
		</div>

	</div>
</div>

<script>
$(document).ready(function() {
	
	/* initialize the external events
	-----------------------------------------------------------------*/

	$('#external-events div.external-event').each(function() {
	
		// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
		// it doesn't need to have a start or end
		var eventObject = {
			title: $.trim($(this).text()) // use the element's text as the event title
		};
		
		// store the Event Object in the DOM element so we can get to it later
		$(this).data('eventObject', eventObject);
		
		// make the event draggable using jQuery UI
		$(this).draggable({
			zIndex: 999,
			revert: true,      // will cause the event to go back to its
			revertDuration: 0  //  original position after the drag
		});
		
	});	
	
    $('.conversation-inner').slimScroll({
        height: '332px',
        alwaysVisible: false,
        railVisible: true,
        wheelStep: 5,
        allowPageScroll: false
    });		
    

	$('.infographic-box .value .timer').countTo({});
	
});
</script>

<script>
$(document).ready(function() {

	/* initialize the calendar
	-----------------------------------------------------------------*/
	
	var date = new Date();
	var d = date.getDate();
	var m = date.getMonth();
	var y = date.getFullYear();

	var calendar = $('#calendar').fullCalendar({
		header: {
			left: 'prev,next today',
			center: 'title',
			//right: 'month,agendaWeek,agendaDay'
			right: ''
		},
		isRTL: $('body').hasClass('rtl'), //rtl support for calendar
		selectable: true,
		selectHelper: true,
		/*select: function(start, end, allDay) {
			var title = prompt('Event Title:');
			if (title) {
				calendar.fullCalendar('renderEvent',
					{
						title: title,
						start: start,
						end: end,
						allDay: allDay
					},
					true // make the event "stick"
				);
			}
			calendar.fullCalendar('unselect');
		},*/
		editable: false,
		droppable: true, // this allows things to be dropped onto the calendar !!!
		drop: function(date, allDay) { // this function is called when something is dropped
		
			// retrieve the dropped element's stored Event Object
			var originalEventObject = $(this).data('eventObject');
			
			// we need to copy it, so that multiple events don't have a reference to the same object
			var copiedEventObject = $.extend({}, originalEventObject);
			
			// assign it the date that was reported
			copiedEventObject.start = date;
			copiedEventObject.allDay = allDay;
			
			// copy label class from the event object
			var labelClass = $(this).data('eventclass');
			
			if (labelClass) {
				copiedEventObject.className = labelClass;
			}
			
			// render the event on the calendar
			// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
			$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
			
			// is the "remove after drop" checkbox checked?
			if ($('#drop-remove').is(':checked')) {
				// if so, remove the element from the "Draggable Events" list
				$(this).remove();
			}
			
		},
		
		events: [	
			<volist name="calendar" id="vo">		
			{
			title: '<{$vo.title}>',
			start: new Date(<{$vo.date|date="Y,m,d",###}>),
			end: new Date(<{$vo.date|date="Y,m,d",###}>),
			url: '<{:U('Home/Calendar/view',array('id'=>$vo['id']))}>',
			},
			</volist>
		]
	});
});
</script>